<template>
	<view class="container">
		<!-- 账户余额 -->
		<view class="balance-card">
			<text class="balance-label">账户余额</text>
			<text class="balance-amount">¥ {{ accountBalance }}</text>
			<view class="balance-actions">
				<button class="recharge-btn" @click="showRecharge">充值</button>
			</view>
		</view>
		
		<!-- 账户信息 -->
		<view class="account-info">
			<view class="info-item">
				<text class="info-label">预存款</text>
				<text class="info-value">¥ {{ preDeposit }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">累计消费</text>
				<text class="info-value">¥ {{ totalConsumption }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">本月消费</text>
				<text class="info-value">¥ {{ monthConsumption }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">是否欠费</text>
				<text class="info-value" :class="{ 'overdue': isArrears }">{{ isArrears ? '是' : '否' }}</text>
			</view>
			<view class="info-item" v-if="isArrears">
				<text class="info-label">欠费金额</text>
				<text class="info-value">¥ {{ arrearsAmount }}</text>
			</view>
		</view>
		
		<!-- 充值弹窗 -->
		<view class="recharge-modal" v-if="showRechargeModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">账户充值</text>
					<text class="close-btn" @click="closeRecharge">×</text>
				</view>
				<view class="modal-body">
					<view class="recharge-amount">
						<text class="amount-label">充值金额</text>
						<input class="amount-input" type="digit" v-model="rechargeAmount" placeholder="请输入充值金额" />
					</view>
					<button class="confirm-recharge" @click="confirmRecharge">确认充值</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accountBalance: 0,
				preDeposit: 0,
				totalConsumption: 0,
				monthConsumption: 0,
				isArrears: false,
				arrearsAmount: 0,
				showRechargeModal: false,
				rechargeAmount: '',
				userPhone: ''
			}
		},
		onLoad() {
			// 页面加载时获取账户信息
			this.fetchAccountInfo();
		},
		methods: {
			// 获取账户信息
			async fetchAccountInfo() {
				try {
					// 从本地存储获取用户手机号
					const userInfo = uni.getStorageSync('userInfo');
					if (!userInfo || !userInfo.phone) {
						uni.showToast({
							title: '未找到用户信息',
							icon: 'none'
						});
						return;
					}
					
					this.userPhone = userInfo.phone;
					
					// 调用API获取账户信息
					const response = await this.getAccountByPhone(this.userPhone);
					
					if (response.code === 0 && response.data && response.data.length > 0) {
						// 处理账户数据，将分转换为元
						const account = response.data[0]; // API返回的是数组，取第一个元素
						this.preDeposit = (parseFloat(account.preDeposit || 0) / 100).toFixed(2);
						this.totalConsumption = (parseFloat(account.totalConsumption || 0) / 100).toFixed(2);
						this.monthConsumption = (parseFloat(account.monthConsumption || 0) / 100).toFixed(2);
						this.isArrears = (account.isArrears === 1);
						this.arrearsAmount = (parseFloat(account.arrearsAmount || 0) / 100).toFixed(2);
						
						// 账户余额等于预存款
						this.accountBalance = this.preDeposit;
					} else {
						uni.showToast({
							title: response.msg || '获取账户信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取账户信息异常:', error);
					uni.showToast({
						title: '网络请求异常',
						icon: 'none'
					});
				}
			},
			
			// 调用获取账户信息接口
			getAccountByPhone(phone) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://localhost:6002/user-client/api/accountInfo/getByPhone?phone=' + phone,
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							resolve(res.data);
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
			
			showRecharge() {
				this.showRechargeModal = true;
			},
			
			closeRecharge() {
				this.showRechargeModal = false;
				this.rechargeAmount = '';
			},
			
			confirmRecharge() {
				if (!this.rechargeAmount) {
					uni.showToast({
						title: '请输入充值金额',
						icon: 'none'
					});
					return;
				}
				
				const amount = parseFloat(this.rechargeAmount);
				if (isNaN(amount) || amount <= 0) {
					uni.showToast({
						title: '请输入有效的充值金额',
						icon: 'none'
					});
					return;
				}
				
				// 模拟充值成功（实际项目中应该调用后端充值接口）
				this.accountBalance = (parseFloat(this.accountBalance) + amount).toFixed(2);
				this.preDeposit = this.accountBalance;
				this.closeRecharge();
				
				uni.showToast({
					title: '充值成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}
	
	.balance-card {
		background: linear-gradient(90deg, #007AFF, #00BFFF);
		border-radius: 15rpx;
		padding: 40rpx 30rpx;
		color: #ffffff;
		margin-bottom: 20rpx;
	}
	
	.balance-label {
		font-size: 28rpx;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.balance-amount {
		font-size: 48rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 30rpx;
	}
	
	.recharge-btn {
		background-color: rgba(255, 255, 255, 0.2);
		color: #ffffff;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		padding: 15rpx 30rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}
	
	.account-info {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666666;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.info-value.overdue {
		color: #ff3b30;
	}
	
	.recharge-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	
	.modal-content {
		background-color: #ffffff;
		border-radius: 15rpx;
		width: 80%;
	}
	
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.modal-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.close-btn {
		font-size: 40rpx;
		color: #999999;
	}
	
	.modal-body {
		padding: 30rpx;
	}
	
	.recharge-amount {
		margin-bottom: 40rpx;
	}
	
	.amount-label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.amount-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	
	.confirm-recharge {
		width: 100%;
		height: 80rpx;
		background-color: #007AFF;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 10rpx;
	}
</style>